import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "zhangsan",
      title: "hello",
      show: true,
      list: ["zhangsan", "lisi", "wangwu"],
      content: "<h1>hahaha</h1>",
    };
  }

  handleClick() {
    this.setState((prevState) => {
      return {
        show: !prevState.show,
      };
    });
  }

  // list里面追加一项zhaoliu
  handleClick2() {
    // this.setState(
    //   (prevState) => {
    //     return {
    //       // push不能用，原因是因为push方法返回的是新数组长度
    //       // list: prevState.list.push("zhaoliu"),
    //       // list: prevState.list.concat("zhaoliu"),
    //       list: [...prevState.list, "zhaoliu"],
    //     };
    //   },
    //   () => {
    //     console.log(this.state.list);
    //   }
    // );

    // 因为数组是复杂类型的，push是不会改变数组的地址的
    // react不知道list已经发生改变了，所以不会报错
    this.state.list.push("zhaoliu");
    // this.setState在这里是让响应式执行
    this.setState({});
  }

  render() {
    return (
      <>
        <h2>state的渲染</h2>
        <p>{this.state.name}</p>
        <button onClick={this.handleClick.bind(this)}>btn</button>
        {this.state.show && <p title={this.state.title}>hello state</p>}
        <ul>
          {this.state.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.handleClick2.bind(this)}>btn2</button>
        {/* <div>{this.state.content}</div> */}
        {/* 相当于vue的v-html，用于解析html字符串 */}
        <div dangerouslySetInnerHTML={{ __html: this.state.content }}></div>
      </>
    );
  }
}

export default App;
